<template>
  <detail-page
    v-loading="loading"
    :title="title"
    :description="headerDescription"
    @close="close"
  >
    <abstract-form>
      <el-card>
        <div style="display: flex; justify-content: space-between">
          <span class="subtitle">特殊人群明细</span>
          <el-button type="primary" size="small" @click="add">添 加</el-button>
        </div>
        <empty v-if="users.length === 0" />
        <div v-else class="user-list">
          <div v-for="row in users" :key="row.id" class="user-li">
            <div class="user-list__content">
              <div>
                <span>{{ row.users_name }}</span>
              </div>
              <div>
                <span>手机号：{{ row.users_tel }}</span>
              </div>
            </div>
            <div class="user-list__footer">
              <el-button type="text" size="small" @click="del(row)"
                >删除</el-button
              >
            </div>
          </div>
        </div>
      </el-card>
    </abstract-form>
    <add-mark-user-dialog
      :id="id"
      v-model="addMarkUserDialog"
      @success="success"
    ></add-mark-user-dialog>
  </detail-page>
</template>

<script>
import DetailPage from '@/views/_common/DetailPage'
import { closeCurrentPage } from '@/utils/route'
import AbstractForm from '@/components/abstract/Form'
import AddMarkUserDialog from './components/addMarkUserDialog.vue'
import { request } from '@/api/request'
import Empty from '@/components/Empty'
import { elConfirm } from '@/utils/message'

export default {
  name: 'NeedToScoreMark',

  components: {
    DetailPage,
    AbstractForm,
    AddMarkUserDialog,
    Empty
  },

  props: {
    id: {
      type: [String, Number],
      default: null
    }
  },

  data() {
    return {
      title: null,
      loading: false,
      addMarkUserDialog: false,
      activeName: '0',
      form: {
        postDetail: []
      },
      tableData: [],
      users: [],
      info: {},
      options: [
        {
          label: '认真负责 - 2分',
          value: 0
        },
        {
          label: '细心 - 2分',
          value: 1
        }
      ]
    }
  },

  computed: {
    headerDescription() {
      return [
        {
          label: '特殊人群标记名称：',
          content: this.info.title
        },
        {
          label: '人数：',
          content: this.info.number + '人'
        },
        {
          label: '添加时间：',
          content: this.info.addTime
        }
      ]
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    add() {
      this.addMarkUserDialog = true
    },

    del({ id }) {
      elConfirm('确定删除该人员？').then(() => {
        request('company/users/specialCrowdSign/delUser', { id }, () => {
          this.$message.success('删除成功')
          this.init()
        })
      })
    },

    success() {
      this.init()
    },

    //获取列表页的地址
    getTablePageUrl() {
      const url = this.$route.path
      const i = url.indexOf('/detail')
      const tablePageUrl = url.substring(0, i)
      return [...tablePageUrl].join('')
    },

    //关闭页面并跳转到列表页
    close() {
      return closeCurrentPage(this.getTablePageUrl())
    },

    init() {
      this.loading = true
      request(
        'company/users/specialCrowdSign/detail',
        { id: this.id },
        (res) => {
          this.users = res.data.users
          this.info = res.data.info
          this.title = '特殊人群标记详情：' + this.info.title
        }
      ).finally(() => (this.loading = false))
    },

    commit() {}
  }
}
</script>

<style lang="scss" scoped>
.user-list {
  margin-top: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;

  &__content {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  &__footer {
    background: #f7f7f7;
    padding: 10px 0;
    text-align: center;
  }
}

.user-li {
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 20%);
}
</style>
